<d-fullscreen [zIndex]="100" (fullscreenLaunch)="launchFullscreen($event)">
  <section fullscreen-target>
    <div class="table-collapse" (click)="onCollapse()">
      <i class="icon icon-sort" [ngClass]="{ 'is-expand': !expand }"></i>
    </div>
    <d-gantt-tools
      [currentUnit]="unit"
      [isFullScreen]="isFullScreen"
      (goToday)="goToday()"
      (increaseUnit)="onIncreaseUnit()"
      (reduceUnit)="onReduceUnit()"
      (switchView)="onSwitchView($event)"
    >
      <d-button bsStyle="text-dark" fullscreen-launch class="tool">
        <i class="icon" [ngClass]="{ 'icon-frame-contract': isFullScreen, 'icon-frame-expand': !isFullScreen }"></i>
      </d-button>
    </d-gantt-tools>
    <d-data-table
      #datatable
      [borderType]="'borderless'"
      [cssClass]="'devui-talbe-scorll-middle'"
      [fixHeader]="true"
      [dataSource]="basicDataSource"
      [scrollable]="true"
      [tableWidthConfig]="tableWidthConfig"
      minHeight="600px"
      (tableScrollEvent)="onTableScroll($event)"
    >
      <thead dTableHead>
        <tr dTableRow>
          <th dHeadCell [fixedLeft]="'0'" *ngIf="expand">title</th>
          <th dHeadCell [fixedLeft]="'200px'" *ngIf="expand">name</th>
          <th
            *ngIf="expand"
            dHeadCell
            dResizeHandle
            [fixedLeft]="'300px'"
            [containerElement]="resizeHandleContainerElement"
            (resizeStartEvent)="onResizeStart($event)"
            (resizingEvent)="onResizing($event)"
            (resizeEndEvent)="onResized($event)"
            (collapseEvent)="onCollapse()"
          >
            status
          </th>
          <th dHeadCell style="padding-left: 20px">
            <d-gantt-scale
              [scrollElement]="scrollView"
              [milestoneList]="milestoneList"
              [ganttScaleContainerOffsetLeft]="ganttScaleContainerOffsetLeft"
              [ganttBarContainerElement]="ganttBarContainerElement"
            ></d-gantt-scale>
          </th>
        </tr>
      </thead>
      <tbody dTableBody [minHeightStretchRow]="minHeightStretchRow">
        <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedLayer="nestedLayer" let-nestedIndex="nestedIndex">
          <tr dTableRow [style.height]="'40px'">
            <td dTableCell [fixedLeft]="'0'" [nestedColumn]="true" [rowItem]="rowItem" [nestedLayer]="nestedLayer" *ngIf="expand">
              <span *ngIf="rowItem.ganttType === 'progress' || rowItem.ganttType === 'parentProgress'">{{ rowItem.title }}</span>
              <span *ngIf="rowItem.ganttType === 'milestone'" class="devui-gantt-milestone">
                <span class="icon">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="22px"
                    height="24px"
                    viewBox="0 0 22 24"
                    version="1.1"
                  >
                    <defs>
                      <linearGradient x1="50%" y1="6.72700158%" x2="50%" y2="91.2568893%" id="gantt-linearGradient-1">
                        <stop stop-color="#3DCCA6" offset="0%" />
                        <stop stop-color="#2AA7AF" offset="100%" />
                      </linearGradient>
                      <path
                        d="M14,1.15470054 L20.3923048,4.84529946 C21.6299092,5.55983064 22.3923048,6.88033872 22.3923048,8.30940108 L22.3923048,15.6905989 C22.3923048,17.1196613 21.6299092,18.4401694 20.3923048,19.1547005 L14,22.8452995 C12.7623957,23.5598306 11.2376043,23.5598306 10,22.8452995 L3.60769515,19.1547005 C2.37009085,18.4401694 1.60769515,17.1196613 1.60769515,15.6905989 L1.60769515,8.30940108 C1.60769515,6.88033872 2.37009085,5.55983064 3.60769515,4.84529946 L10,1.15470054 C11.2376043,0.440169359 12.7623957,0.440169359 14,1.15470054 Z"
                        id="gantt-path-2"
                      />
                      <linearGradient x1="50%" y1="0%" x2="50%" y2="50%" id="gantt-linearGradient-4">
                        <stop stop-color="#FFFFFF" offset="0%" />
                        <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%" />
                      </linearGradient>
                      <linearGradient x1="50%" y1="0%" x2="51.6276154%" y2="68.3310347%" id="gantt-linearGradient-5">
                        <stop stop-color="#FFFFFF" offset="0%" />
                        <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%" />
                      </linearGradient>
                      <linearGradient x1="50%" y1="0%" x2="50%" y2="70.5804357%" id="gantt-linearGradient-6">
                        <stop stop-color="#FFFFFF" offset="0%" />
                        <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%" />
                      </linearGradient>
                      <linearGradient x1="50%" y1="0%" x2="50%" y2="71.0876747%" id="gantt-linearGradient-7">
                        <stop stop-color="#FFFFFF" offset="0%" />
                        <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%" />
                      </linearGradient>
                      <linearGradient x1="50%" y1="0%" x2="50%" y2="60.3844779%" id="gantt-linearGradient-8">
                        <stop stop-color="#FFFFFF" offset="0%" />
                        <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%" />
                      </linearGradient>
                      <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="gantt-linearGradient-9">
                        <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%" />
                        <stop stop-color="#FFFFFF" offset="100%" />
                      </linearGradient>
                      <filter x="-25.0%" y="-75.0%" width="150.0%" height="250.0%" filterUnits="objectBoundingBox" id="gantt-filter-10">
                        <feGaussianBlur stdDeviation="1" in="SourceGraphic" />
                      </filter>
                      <linearGradient x1="-33.9878453%" y1="3.1788779%" x2="67.7654261%" y2="81.2841156%" id="gantt-linearGradient-11">
                        <stop stop-color="#FF790E" offset="0%" />
                        <stop stop-color="#FECC55" offset="100%" />
                      </linearGradient>
                      <linearGradient x1="71.1217155%" y1="42.8128234%" x2="17.9433277%" y2="-14.3609467%" id="gantt-linearGradient-12">
                        <stop stop-color="#FFE88E" offset="0%" />
                        <stop stop-color="#FF790E" offset="100%" />
                      </linearGradient>
                    </defs>
                    <g id="gantt-page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                      <g id="gantt-04fix" transform="translate(-189.000000, -423.000000)">
                        <g id="gantt-Group-2" transform="translate(40.000000, 417.000000)">
                          <g id="gant-group-4" transform="translate(148.000000, 6.000000)">
                            <mask id="gantt-mask-3" fill="white">
                              <use xlink:href="#gantt-path-2" />
                            </mask>
                            <use id="gantt-men" fill="url(#gantt-linearGradient-1)" xlink:href="#gantt-path-2" />
                            <polygon
                              fill="url(#gantt-linearGradient-4)"
                              opacity="0.200000003"
                              mask="url(#gantt-mask-3)"
                              points="10 0 14 0 13 13 11 13"
                            />
                            <polygon
                              fill="url(#gantt-linearGradient-5)"
                              opacity="0.200000003"
                              mask="url(#gantt-mask-3)"
                              transform="translate(17.500000, 11.000000) rotate(-270.000000) translate(-17.500000, -11.000000) "
                              points="14.5 4.5 18.5 4.5 20.5 17.5 19.5 17.5"
                            />
                            <polygon
                              fill="url(#gantt-linearGradient-6)"
                              opacity="0.200000003"
                              mask="url(#gantt-mask-3)"
                              transform="translate(7.000000, 11.000000) scale(-1, 1) rotate(-270.000000) translate(-7.000000, -11.000000) "
                              points="4 4.5 8 4.5 10 17.5 9 17.5"
                            />
                            <polygon
                              fill="url(#gantt-linearGradient-7)"
                              opacity="0.200000003"
                              mask="url(#gantt-mask-3)"
                              transform="translate(8.110913, 8.110913) rotate(-45.000000) translate(-8.110913, -8.110913) "
                              points="6.1109127 1.6109127 10.1109127 1.6109127 9.1109127 14.6109127 7.1109127 14.6109127"
                            />
                            <polygon
                              fill="url(#gantt-linearGradient-8)"
                              opacity="0.200000003"
                              mask="url(#gantt-mask-3)"
                              transform="translate(15.889087, 8.110913) rotate(-315.000000) translate(-15.889087, -8.110913) "
                              points="13.8890873 1.6109127 17.8890873 1.6109127 16.8890873 14.6109127 14.8890873 14.6109127"
                            />
                            <ellipse
                              fill="url(#gantt-linearGradient-9)"
                              opacity="0.5"
                              filter="url(#filter-10)"
                              mask="url(#gantt-mask-3)"
                              cx="12"
                              cy="17"
                              rx="6"
                              ry="2"
                            />
                            <polygon fill="url(#gantt-linearGradient-11)" mask="url(#gantt-mask-3)" points="12 8 18 9 15 11 18 13 11 14" />
                            <polygon fill="url(#gantt-linearGradient-12)" mask="url(#gantt-mask-3)" points="10 6 14 7 13 13 9 13" />
                            <polygon fill="#FFE3A0" mask="url(#gantt-mask-3)" points="10 6 11 6 9 17 8 17" />
                            <polygon fill="#B4832C" mask="url(#gantt-mask-3)" points="13 13 11 14 11.1707479 13" />
                            <rect fill="#000000" opacity="0.100000001" mask="url(#gantt-mask-3)" x="7" y="17" width="10" height="1" />
                          </g>
                        </g>
                      </g>
                    </g>
                  </svg>
                </span>
                <span>Milestone</span>
              </span>
            </td>
            <td dTableCell [fixedLeft]="'200px'" *ngIf="expand">{{ rowItem.lastName }}</td>
            <td
              *ngIf="expand"
              dTableCell
              dResizeHandle
              [fixedLeft]="'300px'"
              [containerElement]="resizeHandleContainerElement"
              (resizeStartEvent)="onResizeStart($event)"
              (resizingEvent)="onResizing($event)"
              (resizeEndEvent)="onResized($event)"
              (collapseEvent)="onCollapse()"
            >
              <div class="reset-position-container">
                <d-reset-position
                  class="reset-position"
                  [ganttScaleContainerOffsetLeft]="ganttScaleContainerOffsetLeft"
                  [datatableElementRef]="datatable"
                  [startDate]="rowItem?.startDate"
                  [endDate]="rowItem?.endDate"
                  [containerScrollLeft]="tableScrollLeft"
                >
                </d-reset-position>
                {{ rowItem.status }}
              </div>
            </td>
            <td dTableCell>
              <d-gantt-bar
                *ngIf="rowItem?.ganttType === 'progress'"
                [scrollElement]="scrollView"
                [startDate]="rowItem?.startDate"
                [endDate]="rowItem?.endDate"
                [tipTemplateRef]="tipTemplate"
                [id]="rowItem?.id"
                [data]="rowItem"
                [originOffsetX]="originOffsetX"
                [barMoveDisabled]="rowItem?.barMoveDisabled"
                [barResizeDisabled]="rowItem?.barResizeDisabled"
                [progressDisabled]="rowItem?.progressDisabled"
                [progressRate]="rowItem?.progressRate"
                (barMoveStartEvent)="onGanttBarMoveStart($event)"
                (barResizeStartEvent)="onGanttBarResizeStart($event)"
                (barResizingEvent)="onGanttBarResizing($event)"
                (barMoveEndEvent)="onGanttBarMove($event)"
                (barResizeEndEvent)="onGanttBarResize($event)"
                (barProgressEvent)="onBarProgressEvent($event)"
              ></d-gantt-bar>
              <d-gantt-bar-parent
                *ngIf="rowItem?.ganttType === 'parentProgress'"
                [id]="rowItem?.id"
                [startDate]="rowItem?.startDate"
                [endDate]="rowItem?.endDate"
                [data]="rowItem"
                [progressRate]="rowItem?.progressRate"
                [tip]="'test'"
              >
              </d-gantt-bar-parent>
              <d-gantt-milestone *ngIf="rowItem?.ganttType === 'milestone'" [startDate]="rowItem?.startDate" [title]="rowItem?.title">
              </d-gantt-milestone>
            </td>
          </tr>
        </ng-template>
      </tbody>
    </d-data-table>
  </section>

  <ng-template #tipTemplate let-ganttInstance="ganttInstance" let-data="data">
    <div class="title">{{ data?.title }}</div>
    <div class="content">
      <div>Duration: {{ ganttInstance?.duration }}</div>
      <div>ProgressRate: {{ (ganttInstance?.progressRate || 0) + '%' }}</div>
      <div>startDate: {{ ganttInstance?.startDate | i18nDate: 'short' }}</div>
      <div>endDate: {{ ganttInstance?.endDate | i18nDate: 'short' }}</div>
    </div>
  </ng-template>

  <ng-template #minHeightStretchRow>
    <tr class="min-height-stretch-row">
      <td dTableCell [fixedLeft]="'0'" *ngIf="expand"></td>
      <td dTableCell [fixedLeft]="'200px'" *ngIf="expand"></td>
      <td
        *ngIf="expand"
        dTableCell
        [fixedLeft]="'300px'"
        [containerElement]="resizeHandleContainerElement"
        (resizeStartEvent)="onResizeStart($event)"
        (resizingEvent)="onResizing($event)"
        (resizeEndEvent)="onResized($event)"
      ></td>
      <td dTableCell></td>
    </tr>
  </ng-template>
</d-fullscreen>
